<!DOCTYPE html>
<html>
<include file="layer:layer_head"/>
<body>
    <!-- 内容主体区域 -->
    <div style="padding:15px;height: 100%;">
        <include file="layer:title"/>
        <div class="layui-row">
            <div class="layui-col-xs12 layui-form-item">
                <button class="layui-btn layui-btn-normal" type="button" id="addMenu">
                    <i class="iconfont icon-jiajianzujianjiahao"></i>
                    添加菜单
                </button>
            </div>
            <div class="layui-col-xs12" id="pagetable" lay-filter="menu"></div>
        </div>
    </div>
</body>
<include file="layer:layer_js"/>
<!--自己的js代码引入-->
<script type="text/html" id="name">
    {{#  if(d.pid != 0){ }}
    <img src="__ADMIN_PUBLIC__/img/erji.jpg" class="pid" />{{d.name}}
    {{#  } else { }}
    <b>{{d.name}}</b>
    {{#  } }}
</script>
<script type="text/html" id="use_status">
    {{# if(d.use_status == 0){ }}
    <!--<span class="layui-badge layui-bg-orange">尚未启用</span>-->
    <input type="checkbox" name="use_status" lay-filter="use_status" lay-skin="switch" lay-text="ON|OFF">
    {{#  }  }}
    {{# if(d.use_status == 1){ }}
    <!--<span class="layui-badge layui-bg-blue">已启用</span>-->
    <input type="checkbox" name="use_status" lay-filter="use_status" lay-skin="switch" lay-text="ON|OFF" checked>
    {{#  }  }}
</script>
<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="edit">编辑</a>
</script>
<script type="text/javascript">
//    var urlquery = "__ROOT__/admin/Menu/menuList";
    var urlquery = "__ROOT__/admin/Menu/getMenuList";
//    page(urlquery);
    layui.use(['table','form','layer'],function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var cols = [[
            {field:'id',title:'ID',width:'3%'},
            {field:'pid',title:'层级',width:'13%'},
            {field:'sort',title:'排序',width:'5%',edit:true},
            {field:'name',title:'菜单名称',width:'20%',templet:"#name",edit:true},
            {field:'use_status',title:'启用状态',width:'10%',templet:'#use_status'},
            {field:'href',title:'链接',edit:true},
            {field:'icon',title:'图标',width:'10%',edit:true,templet:"<div><i class='{{d.icon}}'></i></div>"},
            {field:'action',title:'方法'},
            {fixed: 'right', align:'center', toolbar: '#tool',width:'7%'}
        ]];
        //表格渲染
        layTable(table,urlquery,cols,function () {
            //隐藏部分列
            $("th[data-field=id],td[data-field=id]").css("display","none");
            $("th[data-field=pid],td[data-field=pid]").css("display","none");
        },5);
        //工具栏点击效果
        table.on('tool(menu)',function (obj) {
            var data = obj.data; //获得当前行数据
            console.log(data);
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent == 'edit') {
                updateMenu(table,data.id);
            }
        });
        //单元格编辑
        table.on('edit(menu)',function (obj) {
            var json = obj.data;
            delete json.LAY_TABLE_INDEX;
            console.log(json);
            var update_url = root+"/admin/menu/updateMenu";
            $.post(update_url,json,function (res) {
                if(res.status){
                    layer.msg(res.info,{icon:6,time:1500,success:function () {
                        table.reload("pagetable");
                    }});
                }else{
                    dialog.error(res.info);
                }
            });
        });
        //开关点击
        form.on('switch(use_status)',function (data) {
            var checked = data.elem.checked;
            $(data.elem).parent().parent().attr("data-content",checked?1:0);
            var tr = $(data.elem).parent().parent().parent();
            //获取tr的json数据
            var json = getJsonToTable(tr);
            var update_url = root+"/admin/menu/updateMenu";
            $.post(update_url,json,function (res) {
                if(res.status){
                    layer.msg(res.info,{icon:6,time:1500,success:function () {
                        table.reload("pagetable");
                    }});
                }else{
                    dialog.error(res.info);
                }
            });
        });


        $("#addMenu").click(function () {
            //每次点击都会重新初始化赋值
            var cancel = false;
            layer.open({
                type: 2,
                title:'添加新菜单',
                area: ['40%', '65%'],
                fixed: false, //不固定
                maxmin: true,
                content: '__ROOT__/admin/menu/addmenu.html',
                end:function () {
                    //只在正常关闭时刷新table,点击关闭时不触发
                    if(cancel){
                        return false;
                    }
                    table.reload("pagetable");
                },
                cancel:function (index) {
                    cancel = true;
                }
            });
        });
    });

    function updateMenu(table,id) {
        var cancel = false;
        layer.open({
            type:2,
            title:"编辑菜单",
            area:['40%','65%'],
            fixed: false, //不固定
            maxmin: true,
            content: '__ROOT__/admin/menu/updateMenu.html?menu_id='+id,
            end:function () {
                if(cancel){
                    return false;
                }
                table.reload("pagetable");
            },
            cancel:function (index) {
                cancel = true;
            }
        });
    }
</script>
</html>